<template>
  <div>
    <div>
      <div class="ele"
           @click="selectOther({type: 1, html: datetime})">
        <div style="width: 100%;height: 100%;line-height: 80px;text-align: center;color: #5d6562;">
            {{new Date().toLocaleDateString()}}
        </div>
        <div style="position: relative;top:-80px;color: #8a979e;font-size: 12px">时间</div>
      </div>
      <div class="ele"
           @click="selectOther({type: 2})">
        <div style="width: 100%;height: 100%;line-height: 80px;text-align: center; color: #5d6562;">
          <marquee  scrollamount=5  behavior="scroll" direction="left">跑马灯</marquee>
        </div>
        <div style="position: relative;top:-80px;color: #8a979e;font-size: 12px">跑马灯</div>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
import appConst from '../util/appConst'
import PicPicker from './PicturePicker'
export default {
  props: {
    selectOther: {
      type: Function
    }
  },
  data () {
    return {
      http: appConst.BACKEND_DOMAIN,
      datetime: '<div style="width: 100%;height: 100%;line-height: 100%;text-align: center;"></div>'
    }
  },
  computed: {
  },
  mounted () {
  },
  methods: {
  },
  components: {
    PicPicker
  }
}
</script>

<style lang="less" scoped>
.ele {
  float: left;
  width: 30%;
  height: 80px;
  line-height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 5px 5px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  &:hover {
    border: 2px solid #18ccc0;
    cursor: pointer;
    border-radius: 5px;
  }
}
</style>
